<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 uploader</title>

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.9.0/build/base/base-min.css">
<link rel="stylesheet" type="text/css" media="all" href="css/style.css" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.0/mootools-yui-compressed.js"></script>
<script type="text/javascript" src="../Source/DropZone/Request.Blob.js"></script>
<script type="text/javascript" src="../Source/DropZone/DropZone.js"></script>
<script type="text/javascript" src="../Source/DropZone/DropZone.HTML5.js"></script>
<script type="text/javascript">

window.addEvent('domready', function() {
  	
	// Basic example using the best upload method (Autodetect the best method)
	
	var w = $('someWrap');
	
	var myUpload = new DropZone({
		
		ui_list: w.getElement('.list'),
		ui_drop_area: $(document.body), //w.getElement('.drop_area')
		url: 'upload.php',
				
		onItemAdded: function(el, file, imagedata){
			
			el.addClass('item_box').adopt(new Element('div', {'class': 'text filename', 'html': file.name}))
			.adopt(new Element('div', {'class': 'text type', 'html': file.type}))
			.adopt(new Element('div', {'class': 'progress'}).set('tween', {duration: 200}))
			.adopt(new Element('div', {'class': 'delete', 'html': 'x'}).addEvent('click', function(e){e.stop(); myUpload.cancel(file.id, el)}));

			el.setStyle('opacity', .3);
			
			// remember file type can't be collected for some files,
			// extensions are used then
			
			if(!file.type) return;
			
			if(file.type.match('image') && imagedata){
			
				el.addClass('image');
				new Element('img', {'src': imagedata}).inject(el, 'top');
				
			} else if (file.type.match('audio') || file.type.match('flac')){
				
				el.addClass('audio');
				
			}
			
		},
		onItemProgress: function(el, perc){
			
			console.log('ITEM PROGRESS: ' + perc);
			
			if(!el.getElement('.progress')) return;
			
			console.log(Math.round(160 * perc/100));
			
			el.getElement('.progress').tween('width', Math.round(140 * perc/100));
			el.getElement('.progress').innerHTML = Math.floor(perc) + '%';
						
		},
		onItemComplete: function(el){
			
			console.log('ITEM COMPLETE');
			
			var perc = 100;
			el.getElement('.progress').tween('width', Math.round(140 * perc/100));
			el.getElement('.progress').innerHTML = Math.floor(perc) + '%';
			
			//el.getElement('.progress').destroy();
			el.getElement('.delete').destroy();
			el.setStyle('opacity', 1);
									
		},
		onItemCancel: function(el){
			
			el.destroy();
			
		},
		onUploadStart: function(){
		
			console.log('ON QUEUE START!');
			
		},
		onUploadProgress: function(perc){
			
			w.getElement('.progress_bar').tween('width', 540 * perc/100);
			w.getElement('.progress_bar').innerHTML = Math.floor(perc) + '%';
			
		},
		onUploadComplete: function(num_uploaded){
			
			console.log('ON QUEUE COMPLETE! (' + num_uploaded + ' uploaded)');
			
			if(num_uploaded > 0){
				w.getElement('.progress_bar').tween('width', 540);
				w.getElement('.progress_bar').innerHTML = 'Job done!';
			} else {
				w.getElement('.progress_bar').setStyle('width', 0);
			}
			
		}
	});
	
	
});
</script>

</head>
<body>

<div class="wrap">
	<p>
		<a href="index.html">Multi + List + Drop</a> | 
		<a href="single.html">Only button</a> |
		<a href="droponly.html">Only Drag&Drop</a>
	</p>
		
	<div id="someWrap">
		<div id="uploadWrap" class="drop_area">
			<div class="list"></div>
			<div class="clear"></div>
		</div>
		
		<div class="progress_bar"></div>
		
	</div>
	
	<p><i><small>This one doesn't have button and loads only the HTML5 module. Drag and drop files to test.</small></i></p>

	
</div>

</body>
</html>
